<template>
  <div
    class="fixed bottom-[80px] left-[48%] h-[300px] !w-[40vw] overflow-hidden"
    style="transform: translateX(-50%)"
  >
    <base-card title="党员风采">
      <div
        class="scroll-container"
        @mouseenter="pauseScroll"
        @mouseleave="resumeScroll"
      >
        <div class="scroll-content" :style="contentStyle">
          <div
            class="scroll-item"
            v-for="(img, index) in loopedImages"
            :key="index"
          >
            <img :src="getImageUrl(img.imageUrl)" alt="image" />
            <div>{{ img.name }}</div>
          </div>
        </div>
      </div>
    </base-card>
  </div>
</template>

<script>
// imageUrl
//   :
//   "/profile/iot/9/2025-0710-143410.png"
// name
//   :
//   "李**"
import BaseCard from "@/components/three/component/baseCard.vue";

export default {
  name: "InfiniteScroll",
  components: { BaseCard },
  props: {
    allPerson: {
      type: Array,
      required: true,
    },
    speed: {
      type: Number,
      default: 30, // px/s
    },
  },
  data() {
    return {
      isPaused: false,
      loopedImages: [],
    };
  },
  watch: {
    allPerson: {
      handler(newVal) {
        // 当 allPerson 变化时，更新 loopedImages
        this.loopedImages = [
          ...newVal,
          ...newVal,
          ...newVal,
          ...newVal,
          ...newVal,
          ...newVal,
        ];
      },
      immediate: true,
    },
  },
  computed: {
    contentStyle() {
      const duration = (this.allPerson.length * 200) / 10;
      return {
        animationDuration: `${duration}s`,
      };
    },
  },
  methods: {
    getImageUrl(image) {
      return location.origin + "/api" + image;
    },
    pauseScroll() {
      this.isPaused = true;
    },
    resumeScroll() {
      this.isPaused = false;
    },
  },
};
</script>

<style scoped>
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.scroll-content {
  display: flex;
  animation-name: scroll-left;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.scroll-container {
  overflow: hidden;
  height: 100%;
  cursor: pointer;
}

.scroll-content {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  height: 100%;
}

.scroll-item {
  flex-shrink: 0;
  width: 200px;
  margin-right: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.scroll-item img {
  width: 100%;
  height: 200px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* 关键帧动画 */
</style>
